<template>
<div id="role">

    <!-- 新增用户按钮 -->
    <Button type="primary" @click.native="addRole">新增角色</Button>
    <Divider />

    <!-- 角色列表 -->
    <div id="roleTable">
        <Table border :columns="roleTableHead" :data="role.roleListSta"></Table>
    </div>

    <!-- 新增角色 -->
    <RoleAdd></RoleAdd>

    <!-- 资源配置 -->
    <RoleResource></RoleResource>

    <!-- 编辑角色 -->
    <RoleEdit></RoleEdit>

</div>
</template>

<script>
import Vue from 'vue'
import {
    Button,
    Divider,
    Table,
    Message,
    Modal
} from 'iview'
Vue.prototype.$Message = Message;
Vue.prototype.$Modal = Modal;
import {
    mapState,
    mapMutations,
    mapActions
} from 'vuex'
import RoleAdd from '../../components/RoleAdd' //新增角色
import RoleResource from '../../components/RoleResource' //编辑角色
import RoleEdit from '../../components/RoleEdit' //编辑角色

export default {
    name: 'role',
    data() {
        return {
            //表格头
            roleTableHead: [{
                    title: '角色ID',
                    key: 'id',
                    align: 'center'
                }, {
                    title: '角色名',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '创建时间',
                    key: 'crtime',
                    align: 'center'
                },
                {
                    title: '修改时间',
                    key: 'chtime',
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'handle',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                type: 'Button',
                                class: 'ivu-btn ivu-btn-warning',
                                style: {
                                    marginRight: '10px'
                                },
                                on: {
                                    click: () => {
                                        this.roleResourceSet(params.row);
                                    }
                                }
                            }, '资源配置'),
                            h('Button', {
                                type: 'Button',
                                class: 'ivu-btn ivu-btn-info',
                                style: {
                                    marginRight: '10px'
                                },
                                on: {
                                    click: () => {
                                        this.roleEdit(params.row);
                                    }
                                }
                            }, '编辑角色'),
                            h('Button', {
                                type: 'Button',
                                class: 'ivu-btn ivu-btn-error',
                                style: {
                                    marginRight: '10px'
                                },
                                on: {
                                    click: () => {
                                        this.roleRemove(params.row.id);
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ]
        }
    },
    created() {
        this.roleListAct(); //初始化用户列表
    },
    mounted() {},
    computed: {
        ...mapState({
            role: state => state.role, //角色
            resource: state => state.resource //资源
        })
    },
    methods: {
        ...mapMutations([
            'roleAddModalMut', //新增角色模态框
            'roleResourceModalMut', //资源配置模态框
            'roleEditModalMut', //编辑角色模态框
            'roleOneMut', //获取当前选中的角色
            'roleListDelOneMut' //删除角色列表里的一条数据
        ]),
        ...mapActions([
            'roleListAct', //请求角色数据
            'roleResourceListAct' //根据角色获取对应资源
        ]),
        //新增角色
        addRole() {
            this.roleAddModalMut({
                state: true
            }); //打开新增角色模态框
        },
        //资源配置
        roleResourceSet(row) {
            this.roleResourceModalMut({
                state: true
            }); //打开资源角色模态框
            this.roleOneMut({
                state: row
            }); //获取当前选中的角色
            this.roleResourceListAct(); //根据角色获取对应资源
        },
        //编辑角色
        roleEdit(row) {
            this.roleEditModalMut({
                state: true
            }); //打开编辑模态框
            this.roleOneMut({
                state: row
            }); //获取当前选中的角色
        },
        //删除角色
        roleRemove(id) {
            let _self = this;
            //根据用户id获取用户信息
            let obj = this.$qs.stringify({
                "userId": id
            });
            this.$axios.post('/acl_role/removeRole', obj).then(res => {
                let roleId = res.data;
                if (roleId) {
                    _self.roleListDelOneMut({
                        state: roleId
                    });
                    _self.$Message.success('删除成功');
                } else {
                    _self.$Message.error('删除失败');
                }
            });
        }
    },
    components: {
        Button,
        Divider,
        Table,
        Message,
        Modal,
        RoleAdd,
        RoleResource,
        RoleEdit
    }
}
</script>
